<template>
  <el-header class="navbar">
    <div class="navbar-container">
      <div class="navbar-left">
        <div class="logo-container">
          <div class="logo-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M8 7h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M8 11h8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
              <path d="M8 15h5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <h2 class="navbar-title">
            <span class="title-main">图书管理系统</span>
            <span class="title-sub">Library Management System</span>
          </h2>
        </div>
      </div>

      <div class="navbar-right" v-if="userStore.isLoggedIn">
        <el-dropdown @command="handleCommand">
          <span class="user-info">
            <el-avatar :size="32" :src="userStore.userInfo?.avatar || ''">
              {{ userStore.userInfo?.userName?.charAt(0)?.toUpperCase() }}
            </el-avatar>
            <span class="username">{{ userStore.userInfo?.userName }}</span>
            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>

      <div class="navbar-right" v-else>
        <el-button type="primary" @click="$router.push('/login')">登录</el-button>
      </div>
    </div>
  </el-header>
</template>

<script setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user.js'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { onMounted, watch } from 'vue'

const userStore = useUserStore()
const router = useRouter()

onMounted(() => {
  // 导航栏组件已挂载
})


const handleCommand = (command) => {
  switch (command) {
    case 'profile':
      // 跳转到个人信息页面
      router.push('/profile')
      break
    case 'logout':
      // 用户注销
      userStore.logout()
      break
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  background-color: #fff;
  border-bottom: 1px solid #e4e7ed;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;

    .navbar-left {
      .logo-container {
        display: flex;
        align-items: center;
        gap: 12px;

        .logo-icon {
          width: 40px;
          height: 40px;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
          }

          svg {
            width: 24px;
            height: 24px;
            color: white;
          }
        }

        .navbar-title {
          margin: 0;
          display: flex;
          flex-direction: column;
          line-height: 1.2;

          .title-main {
            font-size: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin: 0;
          }

          .title-sub {
            font-size: 12px;
            color: #8b9dc3;
            font-weight: 400;
            margin: 0;
            letter-spacing: 0.5px;
          }
        }
      }
    }

    .navbar-right {
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 6px;
        transition: background-color 0.3s;

        &:hover {
          background-color: #f5f7fa;
        }

        .username {
          margin: 0 8px;
          font-weight: 500;
          color: #606266;
        }
      }
    }
  }
}
</style>
